import {
    Platform,
    StyleSheet
} from 'react-native'
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import {
    StackNavigator,
    TabNavigator
} from 'react-navigation'

// actions
import * as Actions from './redux/actions'
// pages
import SignPage from './pages/signin'
import HomePage from './pages/home'
import CompanyPage from './pages/company'
import CheckPage from './pages/check'
import PersonPage from './pages/person'
import MyPage from './pages/my'

var styles = StyleSheet.create({
    center: {
        alignSelf: 'center',
        marginLeft: Platform.OS === 'ios' ? -23 : -40,
        color: '#fff',
        fontSize: 16
    },
    headerTintColor: {
        height: 45,
        backgroundColor: '#104e97'
    },
    headerTitleStyle: {
        color: '#fff'
    }
})

/*
* 实现底部Tab
* */
const MainScreenNavigator = TabNavigator(
    {
        Home: {
            screen: HomePage,
            navigationOptions: {

                header: null,
                title: '首页'
            }
        },
        Company: {
            screen: CompanyPage,
            navigationOptions: {
                title: '单位',
                headerTitle: '单位',
                headerStyle: styles.headerTintColor,
                headerTitleStyle: styles.center
            }
        },
        Check: {
            screen: CheckPage,
            navigationOptions: {
                title: '查Ta',
                headerTitle: '查Ta',
                headerStyle: styles.headerTintColor,
                headerTitleStyle: styles.center
            }
        },
        Person: {
            screen: PersonPage,
            navigationOptions: {
                title: '人员',
                headerTitle: '人员',
                headerStyle: styles.headerTintColor,
                headerTitleStyle: styles.center
            }
        },
        My: {
            screen: MyPage,
            navigationOptions: {
                title: '我的',
                headerTitle: '我的',
                headerStyle: styles.headerTintColor,
                headerTitleStyle: styles.center
            }
        }
    },
    {
        animationEnabled: true,
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        backBehavior: 'none',
        tabBarOptions: {
            activeTintColor: '#104e97',
            inactiveTintColor: '#757f8f',
            showIcon: true,
            upperCaseLabel: false,
            style: {
                backgroundColor: '#fff',
            },
            labelStyle: {
                padding: 0,
                margin: 0,
                fontSize: 14
            },
            iconStyle: {
                padding: 0,
                margin: 0,
            }
        }

    })

/*
* 实现跳转的栈
* */

const App = StackNavigator(
    {
        SignPage: {
            screen: SignPage,
            navigationOptions: {
                header: null
            }
        },
        MainPage: { screen: MainScreenNavigator }
    },
    {
        headerMode: 'screen',
        mode: 'modal',
        navigationOptions: { // 是否支持滑动返回手势，iOS默认支持，安卓默认关闭
            gesturesEnabled: true
        }
    }
)


class IfredomApp extends Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <App />
        )
    }
}

export default connect(state => ({
    essence: state.essence,
}),
    (dispatch) => ({
        essence: bindActionCreators(Actions, dispatch)
    })
)(IfredomApp)

// export default App
